<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>学生信息管理系统</title>
    <script src="/js/jquery-1.12.4.min.js"/>
    <script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"/>
    <link href="/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="js/path.js"/>
</head>
<body>
    <div class="row">
        <h1 class="text-center">学生信息管理系统</h1>
    </div>
    <div class="row">
        <div class="col-md-5 col-md-offset-4">
            <a href="/student/list" class="btn btn-info">获取所有学生信息</a>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#selectModal">根据ID查询学生信息</button>
            <button type="button" data-toggle="modal" data-target="#selectByLikeModal" class="btn btn-info">根据姓名学生信息</button>
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#addModal">添加学生信息</button>
        </div>
    </div>

    <div class="row" th:if="${students} ne null">
        <div class="col-md-10 col-md-offset-2">
            <table class="table table-striped table-hover">
                <div class="col-md-10">
                    <table class="table table-hover" id="works_table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>姓名</th>
                                <th>年龄</th>
                                <th>成绩</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="student:${students}">
                                <td th:text="${student.id}"></td>
                                <td th:text="${student.name}"></td>
                                <td th:text="${student.age}"></td>
                                <td th:text="${student.score}"></td>
                                <td>
                                    <a href="#" class="btn btn-primary">修改</a>
                                    <a th:href="@{/student/delete(id=${student.id})}" class="btn btn-danger">删除</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </table>
        </div>
    </div>
    <!--学生信息添加模态框-->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加学生信息</h4>
                </div>
                <div class="modal-body">
                    <form id="addForm" action="http://localhost:8080/student/insert" method="post">
                        <div class="form-group">
                            <label for="addIDInput">ID</label>
                            <input type="text" class="form-control" id="addIDInput" name="id" placeholder="如：123"/>
                        </div>
                        <div class="form-group">
                            <label for="addNameInput">姓名</label>
                            <input type="text" class="form-control" id="addNameInput" name="name" placeholder="如：张三"/>
                        </div>
                        <div class="form-group">
                            <label for="addAgeInput">年龄</label>
                            <input type="text" class="form-control" id="addAgeInput" name="age" placeholder="如：25"/>
                        </div>
                        <div class="form-group">
                            <label for="addSalaryInput">分数</label>
                            <input type="text" class="form-control" id="addSalaryInput" name="score" placeholder="如：99"/>
                        </div>
                        <input type="submit" value="添加" class="btn btn-success"/>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!--根据id查询学生模态框-->
    <div class="modal fade" id="selectModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">查找</h4>
                </div>
                <div class="modal-body">
                    <form action="http://localhost:8080/student/getById" method="get">
                        <input type="text" class="form-control" id="selectIdInput" name="id" placeholder="输入要查找的id"/>
                        <input class="btn btn-success" type="submit" value="查找"/>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!--根据姓名模糊查找学生模态框-->
    <div class="modal fade" id="selectByLikeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">查找</h4>
                </div>
                <div class="modal-body">
                    <form action="http://localhost:8080/student/getByLike" method="get">
                        <input type="text" class="form-control" id="selectNameInput" name="partOfName" placeholder="输入学生姓名的一部分进行模糊查询"/>
                        <input class="btn btn-success" type="submit" value="查找"/>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>